<template>
  <view class="tone-row-box">
    <view class="tone-column-box" v-for="(item, index) in currentData" :key="item.tone">
      <text class="tone-column-text milk-flex-text-center">
        {{ item.text }}
      </text>
      <text class="tone-column-tone milk-flex-text-center">
        {{ item.tone }}
      </text>
    </view>
  </view>
  <view class="footer">
    <view class="footer-item" @click="switchMode">
      {{ currentText }}
    </view>
    <view v-for="(item, index) in footer" :key="item.text" class="footer-item" @click="clickItem(item)"
          :class="{ 'selected': currentIndex === item.index }">
      {{ item.text }}
    </view>
  </view>
</template>

<script>
import {
  unVoicedHiragana,
  unVoicedKatakana,
  voicedHiragana,
  voicedKatakana,
  contractedHiragana,
  contractedKatakana
} from "./tone.js"

export default {
  data() {
    return {
      // 默认平假名
      currentData: unVoicedHiragana,
      currentMode: true,
      currentText: "あ",
      currentIndex: 0,
      currentItem: {
        index: 0,
        text: "清音",
        hiragana: unVoicedHiragana,
        katakana: unVoicedKatakana,
      },
      footer: [{
        index: 0,
        text: "清音",
        hiragana: unVoicedHiragana,
        katakana: unVoicedKatakana,
      }, {
        index: 1,
        text: "浊音",
        hiragana: voicedHiragana,
        katakana: voicedKatakana,
      }, {
        index: 2,
        text: "拗音",
        hiragana: contractedHiragana,
        katakana: contractedKatakana,
      }],
    }
  },
  mounted() {
    console.log(unVoicedHiragana)
  },
  onReady() {
    uni.setNavigationBarColor({
      frontColor: '#ffffff',
      backgroundColor: '#e4bfb6'
    })
  },
  methods: {
    switchMode() {
      this.currentMode = !this.currentMode
      this.currentText = this.currentMode ? "あ" : "ア"
      this.setData()
    },
    clickItem(item) {
      this.currentItem = item;
      this.setData()
    },
    setData() {
      this.currentData = this.currentMode ? this.currentItem.hiragana : this.currentItem.katakana
      this.currentIndex = this.currentItem.index
    }
  }
}
</script>

<style scoped lang="scss">
.tone-row-box {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  height: 56px;

  .tone-column-box {
    width: calc(20% - 2px);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-right: 2px solid #CCCCCC;
    border-bottom: 2px solid #CCCCCC;

    .tone-column-text {
      background: #e0dac2;
      color: #ac7346;
      width: 100%;
      height: 50%;
    }

    .tone-column-tone {
      background: #e4bfb6;
      color: white;
      width: 100%;
      height: 50%;
    }
  }
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  background-color: #e4bfb6; /* 背景颜色 */
  color: #ac7346; /* 字体颜色 */
  height: 5%;
  padding: 10px; /* 可以根据需要调整内边距 */
  box-sizing: border-box;
}

.footer-item {
  width: 23%; /* 每个子视图的宽度，留下一些空间用于间隙 */
  box-sizing: border-box;
  text-align: center;
}

.selected {
  color: white
}

</style>

<style lang="scss">
page {
  background-color: #E0DAC2 !important;
}
</style>
